<!-- 好文榜单 -->
<template>
	<div class="article-ranking">
		<rollback :back="1"></rollback>
		<div class="article-ranking-top">
			<div class="article-ranking-top-bg">
				<van-image width="100%" :src="require('../../assets/imgs/article-ranking-top-bg.png')"></van-image>
			</div>
			<div class="article-ranking-navbar">
				<div class="article-ranking-navbar-bg">
					<van-image width="100%" :src="require('../../assets/imgs/article-ranking-navbar-bg.png')">
					</van-image>
				</div>
				<div class="article-ranking-navbar-panel">
					<van-row type="flex" justify="center">
						<van-col span="6">
							<div :class="{'article-ranking-navbar-item ':true,
											  'article-ranking-navbar-separate':true,
											  'article-ranking-navbar-item-select':selectIndex == 0}" data-index='0' @click.stop="selectItem($event)">
								第一周
							</div>
						</van-col>
						<van-col span="6">
							<div :class="{'article-ranking-navbar-item ':true,
											  'article-ranking-navbar-separate':true,
											  'article-ranking-navbar-item-select':selectIndex == 1}" data-index='1' @click.stop="selectItem($event)">
								第二周
							</div>
						</van-col>
						<van-col span="6">

							<div :class="{'article-ranking-navbar-item ':true,
											  'article-ranking-navbar-separate':true,
											  'article-ranking-navbar-item-select':selectIndex == 2}" data-index='2' @click.stop="selectItem($event)">
								第三周
							</div>
						</van-col>
						<van-col span="6">
							<div :class="{'article-ranking-navbar-item ':true,
											  'article-ranking-navbar-item-select':selectIndex == 3}" data-index='3' @click.stop="selectItem($event)">
								第四周
							</div>
						</van-col>
					</van-row>
					<van-image :class="'article-ranking-navbar-img article-ranking-navbar-select'+selectIndex"
						width="0.44rem" height="0.12rem"
						:src="require('../../assets/imgs/article-ranking-navbar-select.png')">
					</van-image>
				</div>
			</div>
		</div>
		<van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="onRefresh">
			<van-list v-show="articlelist.length > 0" v-model="loading" :finished="finished" finished-text="没有更多了"
				@load="onLoad">
				<div class="article-ranking-content">
					<van-row type="flex" justify="center">
						<van-col span="3">
							<div class="article-ranking-content-column">排名</div>
						</van-col>
						<van-col span="21">
							<div class="article-ranking-content-column">作者《标题》</div>
						</van-col>
					</van-row>
					<div v-for="(item,index) in articlelist" @key="item.Id">
						<van-row type="flex" justify="space-between" @click="goLinkUrl(item.Title,item.LinkUrl)">
							<van-col span="3">
								<div class="article-ranking-content-item">
									<van-image v-if="index < 3" width="0.4rem" height="0.58rem"
										:src="require('../../assets/imgs/NO.'+ (index + 1) +'.png')"></van-image>
									<div v-else class="article-ranking-column">{{index + 1}}</div>
								</div>
							</van-col>
							<van-col span="19">
								<div class="article-ranking-content-item">
									<div class="article-author limit-one-line">{{item.AddPerson}}《{{item.Title}}》</div>
									<div class="article-department limit-one-line">所在机构：{{item.CorpName}}</div>
								</div>
							</van-col>
							<van-col span="1">
								<div class="article-ranking-content-item">
									<van-image width="0.14rem" height="0.24rem"
										:src="require('../../assets/imgs/arrowsRight.png')"></van-image>
								</div>
							</van-col>
						</van-row>
					</div>
				</div>
			</van-list>
			<div v-show="!(articlelist.length > 0)">
				<default-page :hint="hint"></default-page>
			</div>
		</van-pull-refresh>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';

	import Rollback from '../../components/Rollback.vue';
	import DefaultPage from '../../components/DefaultPage.vue';

	import {
		article_api
	}
	from '../../api/index.js';

	export default {
		name: 'article-ranking',
		components: {
			Rollback,
			DefaultPage
		},
		data() {
			return {
				refreshing: false,
				loading: false,
				finished: false,

				hint: '暂无文章',

				selectIndex: 0,
				articlelistPageIndex: 0,
				articlelist: []
			}
		},
		created() {
			//获取榜单
			this.getArticleList()
		},
		methods: {
			onLoad() {
				setTimeout(() => {
					if (this.refreshing) {
						this.articlelistPageIndex = 1;
						// this.articlelist = [];
						Toast('刷新成功');
					} else {
						this.articlelistPageIndex++;
					}

					this.getArticleList();

					this.loading = false;
				}, 1000);
			},
			onRefresh() {
				this.loading = true;
				this.onLoad();
			},

			selectItem(e) {
				let i = parseInt(e.srcElement.dataset.index);
				if (this.selectIndex != i) {
					this.selectIndex = i;
					this.articlelist = [];
					this.getArticleList();
				}
			},
			getArticleList() {
				let data = {
					WeekNum: this.selectIndex + 1,
					PageIndex: this.articlelistPageIndex
				}
				article_api.getArticleList(data, res => {
					console.log('getArticleList', res)
					if (this.refreshing) {
						this.articlelist = res;
					} else {
						this.articlelist.push(...res);
					}
					this.refreshing = false;

					if (res.length < 20) {
						this.finished = true; //已全部加载
					}
				});
			},
			goLinkUrl(title, url) {
				this.$router.push({
					name: 'article-details',
					params: {
						title: title,
						url: url
					}
				})
			}
		}
	}
</script>

<style scoped>
	.van-pull-refresh {
		min-height: calc(100vh - 4.58rem);
	}

	.van-pull-refresh .van-pull-refresh__track {
		min-height: calc(100vh - 4.58rem);
	}

	.article-ranking {
		width: 100%;
		height: 100%;
	}

	.article-ranking-top {
		overflow: hidden;
	}

	.article-ranking-top-bg {
		position: relative;
		height: 0;
		top: -0.88rem;
		z-index: -2;
	}

	.article-ranking-navbar {
		margin-top: 2.56rem;
	}

	.article-ranking-navbar-bg {

		position: relative;
		height: 0;
		z-index: -2;
	}

	.article-ranking-navbar-panel {
		padding: 0.32rem 0;
		margin: 0 0.32rem;
		height: 2.02rem;
		position: relative;
	}

	.article-ranking-navbar-img {
		position: absolute;
		top: 1.3rem;
		transition: left 0.3s;
	}

	.article-ranking-navbar-select0 {
		left: calc(12.5% - 0.22rem);
	}

	.article-ranking-navbar-select1 {
		left: calc(37.5% - 0.22rem);
	}

	.article-ranking-navbar-select2 {
		left: calc(62.5% - 0.22rem);
	}

	.article-ranking-navbar-select3 {
		left: calc(87.5% - 0.22rem);
	}

	.article-ranking-navbar-item {
		text-align: center;
		height: 100%;
		font-size: 0.28rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 1.38rem;
		position: relative;
	}

	.article-ranking-navbar-separate::after {
		content: '';
		width: 0.02rem;
		height: 0.28rem;
		background: #D8D8D8;
		border-radius: 1px;
		position: absolute;
		right: -0.01rem;
		top: calc(50% - 0.14rem);
	}

	.article-ranking-navbar-item-select {
		color: #FE4B4B;
	}

	.article-ranking-content {
		padding: 0 0.3rem 0 0.4rem;
	}

	.article-ranking-content-column {
		text-align: center;
		height: 0.6rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #828282;
		line-height: 0.6rem;
	}

	.article-ranking-content-item {
		height: 1.12rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.article-ranking-column {
		height: 0.48rem;
		font-size: 0.32rem;
		font-family: FZLTTHK--GBK1-0, FZLTTHK--GBK1;
		font-weight: normal;
		color: #B2B2B2;
		line-height: 0.48rem;
	}

	.article-author {
		width: 100%;
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.4rem;
	}

	.article-department {
		text-align: center;

		height: 0.34rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #828282;
		line-height: 0.34rem;
	}
</style>
